<template>
  <table id="items" cellspacing="1" style="width: 100%; height: 100px; border: 1px solid #a8aeb2">
    <tr class="tr" style="border: 1px solid #e7eff3; background-color: #e7eff3">
      <th class="thc">序号</th>
      <th class="tha" colspan="2">实验项目</th>
      <th class="thb">标准规定指标</th>
      <th class="thb">检测结果</th>
      <th class="thd" style="width: 15%">单项判定</th>
      <th class="the">检验方法</th>
      <th class="the">操作</th>
    </tr>
    <tr class="tr" v-for="(item, index) in labEntrustItemsList" :key="index">
      <th class="thc"> {{ index + 1 }} </th>
      <td class="tha" style="text-align: left; padding-left: 10px" v-if="shouldMergeRow(item, index)"
        :colspan="item.indexName == '' || item.indexName == null ? 2 : 0" :rowspan="getMergedRowCount(item, index)">
        {{ item.itemsBasisName }}
      </td>
      <td class="tha" v-if="item.indexName != '' && item.indexName != null">
        {{ item.indexName }}
      </td>
      <td class="thb">
        <a-textarea v-model:value="item.indexBasis" size="large" class="input" />
      </td>
      <td class="thb">
        {{ item.itemResult }}
      </td>
      <td class="thd" style="width: 15%">
        {{ item.itemDecide }}
      </td>
      <td class="the">
        {{ item.basisNum }}
      </td>
      <td class="the" style="width: 12%">
        <a-button type="link" @click="previewItemPdf(item)">原始记录</a-button>
        <a-popconfirm title="确认退回?" ok-text="是" cancel-text="否" @confirm="confirm(item)">
          <a-button type="link" class="deleteBtn" :disabled="item.itemStatus == '已实验' ? false : true">退回</a-button>
        </a-popconfirm>
      </td>
    </tr>
  </table>
</template>

<script lang="ts" setup>
import { defineProps, defineExpose } from 'vue';
import { useGlobSetting } from '/@/hooks/setting';
import { getToken } from '/@/utils/auth';
import { backItem } from './LabItemReportList.api';

const globSetting = useGlobSetting();
const baseApiUrl = globSetting.domainUrl;

const props = defineProps<{
  labEntrustItemsList: [
    {
      id: string;
      taskId: string;
      itemId: string;
      itemName: string;
      indexName: string;
      indexBasis: string;
      itemResult: string;
      itemDecide: string;
      basisNum: string;
      itemsBasisName: string;
      itemPdfUrl: string;
      itemStatus: string;
    }
  ];
}>();
// 判断是否合并
const shouldMergeRow = (item, index) => {
  // 判断是否需要合并行
  if (index > 0 && item.itemId === props.labEntrustItemsList[index - 1].itemId) {
    return false;
  }
  return true;
};
const getMergedRowCount = (item, index) => {
  // 获取合并行的数量
  let count = 1;
  for (let i = index + 1; i < props.labEntrustItemsList.length; i++) {
    if (item.itemId === props.labEntrustItemsList[i].itemId) {
      count++;
    } else {
      break;
    }
  }
  return count;
};

const confirm = (record) => {
  record.itemStatus = '待检测';
  let params = {
    entrustId: record.taskId,
    itemId: record.itemId,
    itemStatus: '待实验',
    taskItemId: record.taskItemsId,
  };
  console.log(backItem(params));
};

defineExpose({
  props,
});

function previewItemPdf(record) {
  let encodedUrl = `${baseApiUrl}/sys/common/static${record.itemPdfUrl}`;
  let iframe = document.getElementById('pdfPreviewIframe');
  let json = { title: '原始记录', token: getToken(), url: encodedUrl };
  iframe.contentWindow.postMessage(json, '*');
}


</script>

<style scoped>
.div {
  height: 45px;
  border: 1px solid #a8aeb2;
  background-color: #d2d5d6;
  text-align: left;
  font: 1.1em sans-serif;
  line-height: 45px;
}

.tr {
  height: 50px;
  border: 1px solid #a8aeb2;
}

.tha {
  width: 15%;
  text-align: center;
  border: 1px solid #a8aeb2;
  font: 1.1em sans-serif;
}

.thb {
  width: 18%;
  text-align: center;
  border: 1px solid #a8aeb2;
  font: 1.1em sans-serif;
}

.thc {
  width: 5%;
  text-align: center;
  border: 1px solid #a8aeb2;
  font: 1.1em sans-serif;
}

.thd {
  width: 12%;
  text-align: center;
  border: 1px solid #a8aeb2;
  font: 1.1em sans-serif;
}

.the {
  width: 15%;
  text-align: center;
  border: 1px solid #a8aeb2;
  font: 1.1em sans-serif;
}

.input {
  width: 100%;
  height: 100%;
  border: none;
  background-color: inherit;
  outline: none;
  border-bottom: none;
  font: 1em sans-serif;
}
</style>
